


// React 事件绑定 
// React 绑定事件  

// 基于原生Js 编写事件    DOM0级事件和DOM2级事件的区别  
// addEventListener("click",fn,true/false);  false/true 冒泡/捕获   默认false 冒泡   DOM2 
// onclick  onchange  onfocus  DOM0
// <p onclick="get()" onclick="login()"></p>

// jquery 
// $("div").on("click")    $("div").off("click")
// $('div').bind('click')  绑定   $('div').unbind('click')

// 事件委托  把事件绑定到父元素上   子元素触发事件   通过事件冒泡  让父元素代替子元素执行冒泡的事件    addEventListener
// $("div").on("click",childnode,fn);
// $("div").delegate(childnode,'click',fn)


// vue
// v-on:click = "get()"      
// @input = "input($event)"  $event 事件对象 


// react 绑定事件  驼峰命名
// onClick
// onChange
// onInput
// onMouseMove
// onMouseDown
// onMouseUp
// onTouchStart
// onTouchMove
// onTouchEnd
// onKeyPress
// onKeyDown
// onKeyUp

// 绑定事件 
// 1. 全局变量 / 外部函数
// 2. 组件内部自定义函数  this 

import React, { Component } from 'react';
import { commonFunc } from '../utils/common';

const actions = {
    clickfn(){
        console.log("Do not sleep Now")
    },
    next(msg){
        console.log(msg)  // event 默认 
        console.log("Are you tired??? ---" + msg)
    },
    stop(e){
        e.stopPropagation()
        e.preventDefault();  
        console.log('我会阻止事件冒泡的哦~')
    }
}



// 构造函数
// 构造器  constructor
// 原型对象  prototype  (__proto__)
// 静态对象  static     (不能被继承 )
class MyEvent extends Component {

    constructor(){
        super()
        console.log(this)
    }

    handleClick(){
        console.log('组件内部的自定义函数 - handleClick')
    }

    hanleChange(e){
        console.log(e.target.value)
    }

    handleInput(e){
        console.log(e.target.value)
    }

    getKeyCode(e){
        console.log(e.keyCode)
    }

    getCharCode(e){
        console.log(e.charCode)
    }

    mouseMove(e){
        console.log(e.clientX || e.touches[0].clientX) 
        console.log(e.clientY || e.touches[0].clientY)
    }

    // 构造函数的内部自定义 this 执行 空 undefined 
    checkThisOne(){
        console.log(this)
    }

    checkThisTwo(){
        console.log(this)
    }

    checkThisThree=()=>{
        console.log(this)
    }

    checkThisFour(){
        console.log('444-four')
        console.log(this)
    }

    // 父类继承得到的函数 
    render() {
        console.log(this)

        return (
            <div onClick={actions.clickfn}>
                <h2 onClick={ ()=>console.log('123123')} style={{color:'darkblue'}}>React 事件绑定 </h2>
                <h3 onClick={ actions.clickfn }>React + Redux </h3>
                <h3 onClick={ (event)=>actions.next(event)  }>React + mobx - 1 </h3>
                <h3 onClick={ ()=>actions.next('daydayup') }>React + mobx - 2 </h3>

                <h3 onClick={actions.stop} >React + Hooks  (阻止事件冒泡) </h3>

                <button onClick={()=>{
                    commonFunc.gotowhere('/app/home')
                    commonFunc.timeFormat()
                }}  >进入 主页 </button>

                <div>
                    <button onClick={this.handleClick }>click me </button>
                </div>
                <p>
                    <input placeholder='change' type="text" onChange={this.hanleChange} />
                </p>
                <p>
                    <input placeholder='input' type="text" onInput={this.handleInput} />
                </p>
                <p>
                    <input placeholder='keyup' type="text" onKeyUp={this.getKeyCode} />
                </p>
                <p>
                    <input placeholder='keypress' type="text" onKeyPress={this.getCharCode} />
                </p>
                <div onTouchMove={this.mouseMove} onMouseMove={this.mouseMove} style={{width:200,height:200,background:'#ffc123'}}>
                    鼠标滑动事件
                </div>
                <button onClick={ this.checkThisOne }>测试this - 1 </button>
                <button onClick={ ()=>this.checkThisOne.call(this) }>测试this - 1 </button>

                <button onClick={ ()=>this.checkThisTwo()  }>测试this - 2 </button>
                <button onClick={ this.checkThisThree }>测试this - 3 </button>
                <button onClick={ this.checkThisFour.bind(this) }>测试this - 4</button>
            </div>
        );
    }
}


// 改变this 方法   call/apply
// 箭头函数  保留this指向 
// 1. 箭头函数本身没有this 它会借用函数外部代码的this, (箭头函数不能被继承 不能被new )
// 2. 箭头函数的this 永远 指向 函数初始化定义时候的this环境,跟当前执行的this环境无关 

// bind 强制改变this 指向

// ()=>a
// ()=>{return a }

// call / apply 调用函数  ()=>this.checkThisOne.call(this) 
// bind  是形成新的函数   this.checkThisFour.bind(this) 

export default MyEvent;
